import React from 'react'
import {Upload,Table, Icon,Button,Row, Col,message} from 'antd'
import { Link} from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
const propsUpload = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
export default class studentTable extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tDate: [],
            totalPage:0,
            loading:false
        }
    }
    getStudentlist=(pn=1,ps=10)=>{
        this.setState({loading:true})
        fetch(config.base+"course/list?pageNum="+pn+"&&pageSize="+ps,{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const courseList = []
                if(rep.total==null){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.list.length ; i++) {
                    courseList.push({
                        key: rep.list[i].id,
                        name: rep.list[i].name
                        })
                }
                this.setState({
                    tDate: courseList,
                    totalPage:rep.total,
                    loading:false
                })
                }

            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试")
                    this.setState({loading:false})
                })
        }
    componentDidMount(){
        this.getStudentlist()
    }



    render() {
        const tDate=this.state.tDate;
        const columns = [{
            title: '课程名称',
            width: '20%',
            dataIndex: 'name'
        },{
            title: '学员导入',
            width: '65%',
            dataIndex: 'operate',
            render:(text, record, index)=> {
            	return <div>
                        <Row gutter={16}>
                        <Col className="gutter-row" span={6}>
                        <Upload {...propsUpload} >
                            <Button>
                              <Icon type="upload" />批量导入
                            </Button>
                         </Upload>
                         </Col>
                         <Col className="gutter-row" span={6}>
                         <Link to={{pathname:"/studentCourseAddone",state:tDate[index].key}}><Button type="primary" htmlType="button" >单个录入</Button></Link>
                         </Col>
                         </Row>
                        </div>
            }
        }]


        const pagination = {
            total: this.state.totalPage,
            showSizeChanger: true,
            onShowSizeChange:(current, pageSize)=> {
                this.getStudentlist(current,pageSize)
            },
            onChange:(current)=> {
                this.getStudentlist(current)
            }
        }

        return (
            <Table  columns={columns} dataSource={tDate} bordered pagination={pagination} loading={this.state.loading} className="animated fadeInUp " />
        )
    }
}
